<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" type="text/css" href="../libs/swiper.min.css"/>
		<script type="text/javascript" src="../libs/swiper.js">
			
		</script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				list-style: none;
			}
			#title-wrap{
				display: flex;
				flex-flow: row wrap;
			}
			#title-wrap>li{
				width: 14.2%;
				/*flex-grow: 1;*/
				text-align: center;
			}
			.listStyle4{
				width: 100%;
				padding: 10px;
				position: relative;
				overflow: hidden;
			}
			.listStyle4>div{
				float: left;
				width: 40%;
			}
			.listStyle4>div>img{
				width: 100%;
			}
			.listStyle4>h4,.listStyle4>p{
				padding-left: 45%;
			}
			.listStyle4>p:last-of-type{
				position: absolute;
				bottom: 10px;
			}
		</style>
	</head>
	
	<body>
		<div id="" class="">
			<!-- 分类栏标题 -->
			<ul id="title-wrap">
				<li>全部</li>
				<li>少年</li>
				<li>奇幻</li>
				<li>爆笑</li>
				<li>灵异</li>
				<li>剧情</li>
				<li>都市</li>
				<li>古风</li>
				<li>日常</li>
				<li>治愈</li>
				<li>恋爱</li>
				<li>完结</li>
			</ul>
			
			<div class="swiper-container">
				<ul class="swiper-wrapper">
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4" >
								<div class="">
					              <img src="" alt="">
					            </div>
					            <h4></h4>
					            <p><span class="nickname">{{n.user.nickname}}</span></p>
					            <p class="created-at"></p>
							</li>
						</ul>
					</li>
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4">
								<div class="">
					              <img src="http://f2.kkmh.com/image/170104/gio7ngxkf.webp-w640" alt="">
					            </div>
					            <h4>零分偶像</h4>
					            <p><span class="nickname">青庭</span></p>
					            <p class="created-at">84.23亿</p>
							</li>
						</ul>
					</li>
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4">
								<div class="">
					              <img src="http://f2.kkmh.com/image/170104/gio7ngxkf.webp-w640" alt="">
					            </div>
					            <h4>零分偶像</h4>
					            <p><span class="nickname">青庭</span></p>
					            <p class="created-at">84.23亿</p>
							</li>
						</ul>
					</li>
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4">
								<div class="">
					              <img src="http://f2.kkmh.com/image/170104/gio7ngxkf.webp-w640" alt="">
					            </div>
					            <h4>零分偶像</h4>
					            <p><span class="nickname">青庭</span></p>
					            <p class="created-at">84.23亿</p>
							</li>
						</ul>
					</li>
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4">
								<div class="">
					              <img src="http://f2.kkmh.com/image/170104/gio7ngxkf.webp-w640" alt="">
					            </div>
					            <h4>零分偶像</h4>
					            <p><span class="nickname">青庭</span></p>
					            <p class="created-at">84.23亿</p>
							</li>
						</ul>
					</li>
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4">
								<div class="">
					              <img src="http://f2.kkmh.com/image/170104/gio7ngxkf.webp-w640" alt="">
					            </div>
					            <h4>零分偶像</h4>
					            <p><span class="nickname">青庭</span></p>
					            <p class="created-at">84.23亿</p>
							</li>
						</ul>
					</li>
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4">
								<div class="">
					              <img src="http://f2.kkmh.com/image/170104/gio7ngxkf.webp-w640" alt="">
					            </div>
					            <h4>零分偶像</h4>
					            <p><span class="nickname">青庭</span></p>
					            <p class="created-at">84.23亿</p>
							</li>
						</ul>
					</li>
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4">
								<div class="">
					              <img src="http://f2.kkmh.com/image/170104/gio7ngxkf.webp-w640" alt="">
					            </div>
					            <h4>零分偶像</h4>
					            <p><span class="nickname">青庭</span></p>
					            <p class="created-at">84.23亿</p>
							</li>
						</ul>
					</li>
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4">
								<div class="">
					              <img src="http://f2.kkmh.com/image/170104/gio7ngxkf.webp-w640" alt="">
					            </div>
					            <h4>零分偶像</h4>
					            <p><span class="nickname">青庭</span></p>
					            <p class="created-at">84.23亿</p>
							</li>
						</ul>
					</li>
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4">
								<div class="">
					              <img src="http://f2.kkmh.com/image/170104/gio7ngxkf.webp-w640" alt="">
					            </div>
					            <h4>零分偶像</h4>
					            <p><span class="nickname">青庭</span></p>
					            <p class="created-at">84.23亿</p>
							</li>
						</ul>
					</li>
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4">
								<div class="">
					              <img src="http://f2.kkmh.com/image/170104/gio7ngxkf.webp-w640" alt="">
					            </div>
					            <h4>零分偶像</h4>
					            <p><span class="nickname">青庭</span></p>
					            <p class="created-at">84.23亿</p>
							</li>
						</ul>
					</li>
					<li class="swiper-slide">
						<p><span>推荐</span> <span>最火热</span> <span>新上架</span></p>
						<!-- 分类栏容器 -->
						<ul>
							<li class="listStyle4">
								<div class="">
					              <img src="http://f2.kkmh.com/image/170104/gio7ngxkf.webp-w640" alt="">
					            </div>
					            <h4>零分偶像</h4>
					            <p><span class="nickname">青庭</span></p>
					            <p class="created-at">84.23亿</p>
							</li>
						</ul>
					</li>
				</ul>
				
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		var swiper = new Swiper('.swiper-container',{
			autoplay:1000
		})
	</script>
</html>
